<template>
  <div class="competitions-container">

    <!-- 用户表格 -->
    <el-table
      :data="usersData"
      border
      stripe
      style="width: 100%"
      :cell-style="{ padding: '8px' }"
    >
      <el-table-column fixed prop="userId" label="ID" width="100">
      </el-table-column>
      <el-table-column prop="avatar" label="头像" width="120">
        <template slot-scope="scope">
          <img :src="scope.row.avatar">
        </template>
      </el-table-column>
      <el-table-column prop="username" label="用户名称" min-width="180">
        <template slot-scope="scope">
          <span class="competition-name">{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="userType" label="用户权限" min-width="180">
        <template slot-scope="scope">
          <span class="competition-name">{{ scope.row.userType }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="realName" label="真实姓名" min-width="180">
        <template slot-scope="scope">
          <span class="competition-name">{{ scope.row.realName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="email" label="电子邮箱" width="120">
        <template slot-scope="scope">
          <span >{{ scope.row.email }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="major" label="专业方向" min-width="150">
        <template slot-scope="scope">
          <i class="el-icon-office-building"></i>
          <span>{{ scope.row.major }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="qqNumber" label="qq号码" min-width="150">
        <template slot-scope="scope">
          <i class="el-icon-office-building"></i>
          <span>{{ scope.row.qqNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="phoneNumber" label="手机号码" min-width="150">
        <template slot-scope="scope">
          <i class="el-icon-office-building"></i>
          <span>{{ scope.row.phoneNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="university" label="所在大学" min-width="150">
        <template slot-scope="scope">
          <i class="el-icon-office-building"></i>
          <span>{{ scope.row.university }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="userProfile" label="个人简介" min-width="150">
        <template slot-scope="scope">
          <i class="el-icon-office-building"></i>
          <span>{{ scope.row.userProfile }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="用户状态" width="120">
        <template slot-scope="scope">
          <span >{{ scope.row.status }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            @click="handleEdit(scope.row)"
            type="primary"
            size="mini"
            icon="el-icon-edit"
            plain
            >编辑</el-button
          >
          <el-button
            @click="handleDeletecompetition(scope.row)"
            type="danger"
            size="mini"
            icon="el-icon-delete"
            plain
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div class="pagination">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        @current-change="handlePageChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
name: "manageUsers",
data() {
  return {
    
  };
},
mounted() {
  
},
methods:{

}
}
</script>

<style scoped lang="scss">
.competitions-container {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;

  

  .competition-name {
    font-weight: 500;
    color: #1a73e8;
  }

  .el-table {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    border-radius: 8px;

    ::v-deep .el-table__header {
      th {
        background-color: #f5f7fa;
        color: #1a1a1a;
        font-weight: 600;
      }
    }
  }

  .pagination {
    margin-top: 20px;
    text-align: center;
  }
}
</style>